<script setup>
import { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { sellerGetOrderAPI, sendGoodsAPI } from '@/apis/seller';


onMounted(() => getOrderList())

const state = ref('')//搜索时的状态
const searchId = ref('')//搜索时的搜索Id
const page = ref(1)//当前页//分页条数据模型
const total = ref(20)//总条数
const pageSize = ref(3)//每页条数


const orderList = ref([])
const getOrderList = async () => {
    //搜索参数
    let searchParams = ref({
        state: state.value,
        searchId: searchId.value,
        page: page.value,
        pageSize: pageSize.value
    })
    let res = await sellerGetOrderAPI(searchParams.value)
    // console.log(res);
    total.value = res.data.data.counts
    orderList.value = res.data.data.items
}

//清除搜索信息
const clearSearchInfo = () => {
    state.value = ''
    searchId.value = ''
}


//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getOrderList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    page.value = num
    getOrderList()
}

// 创建格式化函数
const formatPayState = (payState) => {
    const stateMap = {
        1: '待付款',
        2: '待发货',
        3: '待收货',
        4: '待评价',
        5: '已完成',
        6: '已取消'
    }
    return stateMap[payState]
}

const sendGoods = async (orderItemId) => {
    await sendGoodsAPI(orderItemId)
    getOrderList()
}
const isOrderDetail = ref(false)
const orderDetailFrom = ref({})
const orderDetail = async (order) => {
    orderDetailFrom.value = order
    console.log('order:');
    console.log(order);
    console.log('orderDetailFrom:');
    console.log(orderDetailFrom);
    isOrderDetail.value = true
}

</script>

<template>
    <div class="order-container">
        <el-form inline>
            <el-form-item label="订单状态：">
                <el-select placeholder="请选择" v-model="state" style="width: 200px;">
                    <el-option label="待付款" value="1"></el-option>
                    <el-option label="待发货" value="2"></el-option>
                    <el-option label="待收货" value="3"></el-option>
                    <el-option label="待评价" value="4"></el-option>
                    <el-option label="已完成" value="5"></el-option>
                    <el-option label="已取消" value="6"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input :prefix-icon="Search" v-model="searchId" style="width: 200px" placeholder="请输入订单编号" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getOrderList()">搜索</el-button>
                <el-button @click="clearSearchInfo()">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="orderList" style="width: 100%">
            <el-table-column label="下单时间" prop="createTime" width="200"></el-table-column>
            <el-table-column label="订单编号" prop="id"></el-table-column>
            <el-table-column label="商品名称" prop="goodsName"></el-table-column>
            <el-table-column label="商品图片" prop="goodsImg">
                <template #default="{ row }">
                    <img :src="row.goodsImg" style="width: 60px; height: 60px; object-fit: cover;">
                </template>
            </el-table-column>
            <el-table-column label="商品单价" prop="price"></el-table-column>
            <el-table-column label="商品数量" prop="amount"></el-table-column>
            <el-table-column label="商品状态" prop="state">
                <template #default="{ row }">
                    <span>{{ formatPayState(row.state) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="运费" prop="shippingFee"> </el-table-column>
            <el-table-column label="总价" prop="total"> </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="{ row }">
                    <el-button v-if="row.state === 2" type="success" @click="sendGoods(row.orderItemId)">发货</el-button>
                    <el-button type="success" @click="orderDetail(row)">详情</el-button>
                </template>

            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </div>
    <!-- 订单详情 -->
    <el-drawer v-model="isOrderDetail" title="订单详情" :before-close="handleClose" direction="rtl" size="30%">
        <el-descriptions v-model="orderDetailFrom" class="margin-top" :column="1" border label-width="100px">
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        订单编号
                    </div>
                </template>
                {{ orderDetailFrom.id }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        商品名称
                    </div>
                </template>
                {{ orderDetailFrom.goodsName }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        商品图片
                    </div>
                </template>
                <img :src="orderDetailFrom.goodsImg" width="100px" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        商品单价
                    </div>
                </template>
                {{ orderDetailFrom.price }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        商品数量
                    </div>
                </template>
                {{ orderDetailFrom.amount }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        商品运费
                    </div>
                </template>
                {{ orderDetailFrom.shippingFee }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        商品总价
                    </div>
                </template>
                {{ orderDetailFrom.total }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        配送时间
                    </div>
                </template>
                <span v-if="orderDetailFrom.deliveryTime === 1">任意时间</span>
                <span v-else-if="orderDetailFrom.deliveryTime === 2">工作日</span>
                <span v-else-if="orderDetailFrom.deliveryTime === 3">休息日</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        支付方式
                    </div>
                </template>
                <span v-if="orderDetailFrom.payType === 1">在线支付</span>
                <span v-else-if="orderDetailFrom.payType === 2">货到付款</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        支付渠道
                    </div>
                </template>
                <span v-if="orderDetailFrom.payChannel === 1">微信</span>
                <span v-else-if="orderDetailFrom.payChannel === 2">支付宝</span>
                <span v-else-if="orderDetailFrom.payChannel === 3">招商银行</span>
                <span v-else-if="orderDetailFrom.payChannel === 4">工商银行</span>
                <span v-else-if="orderDetailFrom.payChannel === 5">建设银行</span>
                <span v-else-if="orderDetailFrom.payChannel === 6">农业银行</span>
                <span v-else-if="orderDetailFrom.payChannel === 7">交通银行</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        收货人
                    </div>
                </template>
                {{ orderDetailFrom.receiver }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        手机号
                    </div>
                </template>
                {{ orderDetailFrom.rePhone }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        收货地址
                    </div>
                </template>
                {{ orderDetailFrom.address }}
            </el-descriptions-item>
        </el-descriptions>
    </el-drawer>
</template>
<style scoped lang="scss">
.order-container {
    padding: 10px 20px;
    background: white;

    .pagination-container {
        display: flex;
        justify-content: center;
    }

    .main-container {
        min-height: 500px;

        .holder-container {
            min-height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

// 如果需要修改表格背景色（Element Plus表格默认有背景）
.el-table {
    background: white;

    &::before {
        // 移除表格底部边框线
        height: 0;
    }
}

// 可选：修改分页组件背景
.el-pagination {
    padding: 16px 5px;
    background: white;
}

/* 设置全局页面背景 */
body {
    background: #fff;
}
</style>
